Vue.component('app-list',{
    template:"#app-list",
    data:function () {
        return{
            userData:Mock.mock({'data|10':[{
                    name:'@cname',
                    gender:'@boolean',
                    city:'@city',
                    phoneNumber:/^1[35789]\d{9}$/,
                    age:'@integer(16,30)'
                }]}).data,
            // selectedKey:-1
            a:[]
        }
    },
    methods:{
        clickToDel(index){
            // this.userData.splice(index,1);
            this.a.splice(index,1);
        }
    },
    computed:{
        filterUser:function () {
            let selectedFns = {
                '-1':() => true,
                0:value => value.gender,
                1:value => !value.gender,
                2:value => value.age < 20,
                3:value => /^1[3458]/.test(value.phoneNumber)
            };
            return this.userData.filter(selectedFns[this.foo]);
        }
    },
    // props:['foo']
    props:['foo','origin'],
    watch:{
        filterUser(){
            this.a = this.filterUser;
        }
    },
    mounted(){
        this.a = this.filterUser;
    }
});
